

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
  },
  
  // 加载状态
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
    color: '#9ca3af',
  },

  // 顶部导航栏
  header: {
    backgroundColor: '#111827',
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  headerTop: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  titleGradient: {
    paddingHorizontal: 1,
    paddingVertical: 1,
    borderRadius: 4,
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  headerActions: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  headerActionButton: {
    padding: 8,
  },

  // 搜索框
  searchContainer: {
    marginTop: 12,
  },
  searchInputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#0f172a',
    borderWidth: 1,
    borderColor: '#4b5563',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  searchIcon: {
    marginRight: 8,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: '#f3f4f6',
  },
  searchClearButton: {
    padding: 4,
  },

  // 筛选标签
  filterTagsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: '#111827',
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    gap: 8,
  },
  filterTagsLabel: {
    fontSize: 14,
    color: '#9ca3af',
  },
  activeFiltersContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    gap: 8,
  },
  filterTag: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(99, 102, 241, 0.2)',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
    gap: 4,
  },
  searchFilterTag: {
    backgroundColor: 'rgba(139, 92, 246, 0.2)',
  },
  filterTagText: {
    fontSize: 12,
    color: '#6366f1',
  },
  searchFilterTagText: {
    color: '#8b5cf6',
  },
  filterTagRemove: {
    padding: 2,
  },
  clearFiltersText: {
    fontSize: 14,
    color: '#6366f1',
  },

  // 列表
  listContainer: {
    padding: 16,
  },

  // 审批项
  approvalItem: {
    marginBottom: 12,
    borderRadius: 12,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
      },
      android: {
        elevation: 2,
      },
    }),
  },
  approvalItemGradient: {
    borderRadius: 12,
    padding: 16,
  },
  approvalItemHeader: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  approvalItemTitle: {
    flex: 1,
    fontSize: 16,
    fontWeight: '600',
    color: '#ffffff',
    marginRight: 12,
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  statusBadgeText: {
    fontSize: 12,
    color: '#ffffff',
    fontWeight: '500',
  },
  approvalItemInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  approvalItemInfoLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  approvalItemInfoRight: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  approvalItemInfoText: {
    fontSize: 14,
    color: '#9ca3af',
  },
  approvalItemFooter: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  approvalItemTimeText: {
    fontSize: 12,
    color: '#6b7280',
  },
  priorityBadge: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 8,
  },
  priorityBadgeText: {
    fontSize: 10,
    color: '#ffffff',
    fontWeight: '500',
  },

  // 空状态
  emptyStateContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 64,
  },
  emptyStateGradient: {
    borderRadius: 16,
    padding: 32,
    alignItems: 'center',
    marginHorizontal: 16,
  },
  emptyStateTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#d1d5db',
    marginTop: 16,
    marginBottom: 8,
  },
  emptyStateSubtitle: {
    fontSize: 14,
    color: '#9ca3af',
    textAlign: 'center',
  },

  // 筛选弹窗
  filterModalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  filterModalContainer: {
    backgroundColor: '#111827',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    maxHeight: '80%',
    paddingBottom: 20,
  },
  filterModalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 24,
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
  },
  filterModalTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
  },
  filterModalCloseButton: {
    padding: 4,
  },

  // 筛选部分
  filterSection: {
    paddingHorizontal: 24,
    paddingVertical: 16,
  },
  filterSectionTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#d1d5db',
    marginBottom: 12,
  },
  filterStatusContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  filterStatusButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    backgroundColor: '#0f172a',
    borderWidth: 1,
    borderColor: '#4b5563',
    borderRadius: 16,
  },
  filterStatusButtonActive: {
    backgroundColor: 'rgba(99, 102, 241, 0.2)',
    borderColor: '#6366f1',
  },
  filterStatusButtonText: {
    fontSize: 14,
    color: '#d1d5db',
  },
  filterStatusButtonTextActive: {
    color: '#6366f1',
  },

  // 排序部分
  filterSortContainer: {
    gap: 8,
  },
  filterSortOption: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  filterSortRadio: {
    width: 16,
    height: 16,
    borderRadius: 8,
    borderWidth: 2,
    borderColor: '#4b5563',
    justifyContent: 'center',
    alignItems: 'center',
  },
  filterSortRadioActive: {
    borderColor: '#6366f1',
  },
  filterSortRadioInner: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#6366f1',
  },
  filterSortOptionText: {
    fontSize: 14,
    color: '#d1d5db',
  },

  // 操作按钮
  filterModalActions: {
    flexDirection: 'row',
    paddingHorizontal: 24,
    paddingTop: 16,
    gap: 12,
    borderTopWidth: 1,
    borderTopColor: '#374151',
  },
  filterModalResetButton: {
    flex: 1,
    paddingVertical: 12,
    backgroundColor: '#0f172a',
    borderWidth: 1,
    borderColor: '#4b5563',
    borderRadius: 8,
    alignItems: 'center',
  },
  filterModalResetButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#d1d5db',
  },
  filterModalApplyButton: {
    flex: 1,
    borderRadius: 8,
    overflow: 'hidden',
  },
  filterModalApplyButtonGradient: {
    paddingVertical: 12,
    alignItems: 'center',
  },
  filterModalApplyButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#ffffff',
  },
});

